<template>
	<div v-if="notFound">
		<div class="page-head">
			<span class="card-residue">您有<span>{{residue}}</span>张卡可用</span>
			<a class="card-add" v-on:click="give"><i class="sf-jia"></i>添加套餐卡</a>
		</div>
		<div v-show="residueType">
			<div class="card-main clearfix">
				<div v-show="loadingShow">
					<loading></loading>
				</div>
				<card-type-b></card-type-b>
				<a v-link="{name:'denycard',params:{ type: 'lockCard'}}" class="no-card-link">没有更多了,<span>查看不可用卡</span></a>
			</div>
			<div class="banner">
				<a class="banner-link" :href="imgLink">
					<img class="banner-img" width="100%" :src="imgUrl" alt="">
				</a>
			</div>
		</div>
		<div v-else>
			<div class="null-card">
				<img class="null-card-img" src="" />
				<p class="null-card-text">还没有可用的卡</p>
				<a class="banner-link" :href="imgLink">前往购卡</a><!-- 
				<a class="add-card" v-on:click="give">添加卡<i class="iconfont icon-arrows"></i></a> 
				<a class="no-card-link" v-link="{name:'denycard',params:{ type: 'lockCard'}}">查看不可用卡<i class="iconfont icon-arrows"></i></a>-->
			</div>
			<div class="page-bottom-text">没有更多了,<a v-link="{name:'denycard',params:{ type: 'lockCard'}}">查看不可用卡</a></div>
		</div>
		
		<mt-popup :visible.sync="popupVisible" popup-transition="popup-fade">
			<a class="close-btn" href="javascript:;" v-on:click="close">+</a>
			<div class="card-add-box">
				<p class="card-add-title">请填写激活码</p>
				<div class="input-box">
					<div class="input-border">
						<input class="card-add-inp" v-model="subCodeVal" type="text" placeholder="输入激活码" />
					</div>
					<div class="input-border">
						<input class="card-add-inp" v-model="subCodePhone" type="text" placeholder="输入购卡的手机号" />
					</div>
				</div>
				<div class="submit-box">
					<a class="card-btn" v-on:click="subCode">确认</a>
				</div>
			</div>
		</mt-popup>
		<div>
	  		<!--<iframe :src="iframe" style="display: none" v-if="isIOSWechat"></iframe>-->
		</div>
	</div>
</template>

<script>
	
	import cardTypeB from '../card-box/card-type-b';
	import common from '../../utils/common.js';
	import loading from '../common/loading';
	//弹窗
	import MintUI from 'mint-ui';
	import {Popup} from 'mint-ui';
	
	
	common.Vue.component(Popup.name, Popup);

	export default {
		components: {
			cardTypeB,loading
		},
		data: function(){
			return {
				loadingShow:true,
				//myCardData:{}, //我的套餐卡列表
				residue:' ', //判断用户是否有卡（包含可用卡及不可用卡）
				residueType:true,
				//弹出框
				popupVisible: false,
				lockCard:[],//锁定的卡
				usableCard:[],//可用的卡
				subCodeVal:'',
				subCodePhone:'',
				iframe: '',
				isIOSWechat: common.isIOSWechat(),
				imgUrl:'',
				imgLink:'',
				notFound:true,
				//时间统计
				initTime:0,
				getTime:0
			}
		},
		route:{
			activate(transition){
				transition.next();
			},
			data () {
				common.setTitle('我的套餐卡');  // 设置title
				if(sessionStorage.successFalg){
					sessionStorage.successFalg = '';
				}
				this.myCardListAjax();
				this.initTime = new Date().getTime();
			}
		},
		ready: function () {
			common.ANA_Analytics();
			//this.iframe = common.setTitleAgain('我的套餐卡', this.iframe);
/*			common.setTitle('我的套餐卡');
*/
			// 传递提交页面
			var confirmObj = {
				recommendCodeShow: true,
				carShow: true,
				stroeShow: true,
				time: true,
				orderType: '06'
			}
			sessionStorage.btnType = true;
			localStorage.setItem('confirmObj', JSON.stringify(confirmObj));

		},
		methods: {
				//请求我的套餐卡列表
				myCardListAjax:function(){
					localStorage.lockCard = '';
					var _this = this,cardData;
					_this.usableCard = [];
					_this.lockCard = [];
					this.$http.get(common.isdev()+'/cxb/spah5/serviceGroupCardBanner.shtml').then(function ( d ){

						var bannerData = JSON.parse(d.body);
						this.imgUrl = bannerData.result[0].imgUrl;
						this.imgLink = bannerData.result[0].link;
						console.log(this.imgUrl);
						if(!this.imgUrl){

							this.imgUrl = '//s1.cximg.com/msweb02/spah5/static/img/artboard-banner.jpg';

						}

						if(!this.imgLink){
							this.imgLink = 'javascript:;';
						}

					}, function ( error ) {

						common.Toast(error.data);
						
					});
					this.$http.post(common.isdev()+'/cxjCard/list.htm').then(function ( d ){

						cardData = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
						
						if(cardData.result === 0){
							/******** 修改404页面 ********/
	                        this.notFound = false;
	                        common.goNotFound();
	                        /******** 修改404页面 ********/
							//common.Toast("请求错误");

						}
						else if(cardData.result === 1){
							if(cardData.obj === null){

								_this.residue = 0;
								_this.residueType = false;

							}else{

								for(var i = 0; i < cardData.obj.cardList.length; i++){

									if(cardData.obj.cardList[i].isCanUse == 1){ //判断可是否可用，分类卡数据
										//console.log('可用');
										_this.usableCard.push(cardData.obj.cardList[i]);
									}else{
										//console.log('锁定');
										_this.lockCard.push(cardData.obj.cardList[i]);
									}
								}
								if(_this.usableCard.length){
									_this.residue = _this.usableCard.length;
									_this.residueType = true;
									//过滤套餐卡中的城市，追加所在省的属性
									for(var i = 0; i < _this.usableCard.length; i++){

										_this.usableCard[i].provName = common.getProvince(_this.usableCard[i].applyCityNo.substr(0,2));

									}
									
								}else{
									_this.residueType = false;
								}
								
								


								//缓存不可用卡数据
								localStorage.lockCard = JSON.stringify(_this.lockCard);
								//缓存可用卡数据
								localStorage.cardData = JSON.stringify(_this.usableCard);

								_this.$broadcast("cardTypeBdata",_this.usableCard);
								_this.loadingShow = false;
							}
						}
						else if(cardData.result === -99){

							common.goLogin();

						}
					}, function ( error ) {

						common.Toast(error.data);
						
					});
				},
				//弹出框	
				give: function() {
					this.popupVisible = !this.popupVisible;
				},
				close: function() {
					this.popupVisible = !this.popupVisible;
					this.subCodePhone = '';
					this.subCodeVal = '';
				},
				subCode:function(){
					//var ajaxFlag = false;
					if(this.subCodeVal.trim() == ''){
						common.Toast("激活码不能为空！");
						return false;
					}else if(this.subCodePhone.trim() == ''){
						common.Toast("购买手机号不能为空！");
						return false;
					}else{

						/*if(ajaxFlag){

							return false;
						}*/

						//ajaxFlag = true;

						this.$http.post(common.isdev()+'/cxjCard/bind.htm',{
							coupon:this.subCodeVal,
							mobile:this.subCodePhone
						}).then(function ( d ){

							var data = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
							if(data.result){
								common.Toast("添加套餐卡成功!");
								this.popupVisible = !this.popupVisible;
								//ajaxFlag = false;
								this.subCodePhone = '';
								this.subCodeVal = '';
								this.myCardListAjax();
							}else{
								//ajaxFlag = false;
								common.Toast(data.msg);
							}
						},function ( error ) {
							//ajaxFlag = false;
							common.Toast(error.data);
							
						});
					}
				}
				
			}
		}

</script>

<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	@import "../../assets/css/toast.scss";
	.loding{
		margin:rem(240) 0;
	}
	.page-head{
		font-size:rem(14);
		padding:rem(15);
		overflow: hidden;
		.card-residue{
			float:left;
			span{
				display:inline-block;
				color:#0190e7;
				padding:0 rem(2);
			}
		}
		.card-add{
			float:right;
		}
		.icon-cross{
			width:rem(12);
			height: rem(12);
			margin-right:rem(3);
			display:inline-block;
			position:relative;
			text-align: center;
			vertical-align: middle;
		}
		.icon-cross:after{
			content:'';
			width:rem(2.5);
			height:rem(11);
			display:inline-block;
			background-color: #ccc;
			position:absolute;
			top:rem(0);
			left:rem(4);
		}
		.icon-cross:before{
			content:'';
			width:rem(11);
			height:rem(2.5);
			display:inline-block;
			background-color: #ccc;
			position:absolute;
			top:rem(4);
			left:0;
		}
	}
	.card-main{
		padding:0 rem(15);
		border-bottom: 1px solid #c8c7cc;
		margin-bottom:rem(20);
		.no-card-link{
			width:100%;
			text-align:center;
			margin:rem(10) 0;
			font-size: rem(14);
			color:#666;
			float:right;
			span{
				color:#22b2ed;
			}
		}

	}
	.page-bottom-text{
		font-size:11px;
		text-align:center;
		position:absolute;
		bottom:rem(42);
		left:0;
		right:0;
		margin:auto;
		a{
			color:#8392a0;
		}
	}
	.null-card{
		overflow: hidden;
		padding-bottom:rem(20);
		margin-bottom:rem(20);
		.banner-link{
			width:rem(160);
			height:rem(37);
			line-height:rem(37);
			display:block;
			margin:0 auto;
			text-align:center;
			color:#fff;
			background-color:#ff6600;
			border-radius:4px;
		}
		.null-card-img{
			width:rem(91);
			height:rem(91);
			display:block;
			margin:rem(38) auto rem(20) auto;
		}
		.null-card-text{
			margin-bottom: rem(20);
			text-align:center;
			font-size:rem(14);
			color:#969696;
		}
		& > a{
			display:block;
			height: rem(35);
			line-height: rem(35);
			font-size:rem(14);
			padding:0 rem(14);
			background-color:#fff;
			color:#666;
		}
		.add-card{
			border-bottom:1px solid #c8c7cc;
		}
		.icon-arrows{
			float:right;
			color: #c7c7cc;
		}
		
	}
	.banner{
		padding:0 rem(15) rem(15) rem(15);
		.banner-img{
			height: rem(120);
			border:1px;
		}
	}

	.card-add-box {
		text-align: center;
		border-radius: rem(8);
		position: relative;
	}
	.card-add-box .input-box{
		padding: rem(34) rem(15) rem(15) rem(15);
	}
	.mint-popup {
		width: rem(300);
		height: rem(238);
		margin: 0 auto;
		border-radius: 5px;
	}
	.card-add-title {
		font-size: rem(17);
		margin-top: rem(17);
	}
	.input-border{
		border-bottom: 1px solid #ccc;
		padding-bottom:2px;
		margin-bottom:rem(17);
	}
	.card-add-inp {
		width: 100%;
		height: rem(25);
		border-left:4px solid #4a90e2;
		padding:rem(4) rem(10);
		color: #333;
		font-size:rem(15);
		text-align:center;
		border-radius: 0;
	}
	.card-btn {
		display: inline-block;
		border-radius: rem(4);
		border:1px solid #d1d1d1;
		width: rem(223);
		height: rem(35);
		line-height: rem(35);
		font-size: rem(14);
		color: #333;
	}
	.close-btn{
		width:3rem;
		height:3rem;
		display:block;
		position:absolute;
		font-size:3rem;
		right:0;
		top:0;
		transform: rotate(45deg);
		color:#000;
	}
  	.card-close {
  		border-right:1px solid #ccc;
  	}
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		font-weight: 100;
		color:#999;
		font-size:rem(14);
	}
	.sf-jia{
		margin-right:rem(5);
		display:inline-block;
		background-position: center center;
	}
</style>
